<!--
  Created by IntelliJ IDEA.
  User: Dai
  Date: 2018/4/4
  Time: 9:40
  To change this template use File | Settings | File Templates.
-->
<!DOCTYPE html>
<html lang="en" layout:decorate="~{default/just_css_and_js}" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <style>
        /*这个页面上的表格的样式*/
        .th-inner {
            height: 20px;
            line-height: 20px;
            font-size: 13px;
            padding: 0 !important;
            /* background-image: none; */
            background-color: white;
            border: 0 !important;
        }

        table {
            border: 0 !important;
        }

        tr {
            border: 0 !important;
        }

        /*实时监控 电池包监控 字太多放不下*/
        #package_monitor label {
            padding-right: 0;
            margin-top: 4px;
        }

        #package_monitor span {
            padding-right: 0;
            margin-top: 4px;
        }

        /*实时监控 模组监控 行转列只能用div做了*/
        .div-like-form .div-left div {
            text-align: center;
            padding: 5px 15px;
        }

        .div-like-form .div-left div:first-child {
            background-color: #c2c2c2;
        }

        .div-like-form .div-left {
            float: left;
        }

        .div-like-form .div-left.first-child div {
            padding: 5px 40px;
        }

    </style>
    <script src="/js/echarts.min.js"></script>
    <!-- datepicker 时间选择器 -->
    <script src="/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
        /**
         * 限制开始时间和结束时间不能互相超过
         */
        $(function () {
            $("#start_time_select").datetimepicker({
                bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
                startView: 2,
                format: "yyyy-mm-dd",
                minView: "month",
                todayBtn: "linked",
                todayHighlight: true,
                language: "zh-CN",
                showMeridian: true,
                autoclose: true,
                endDate: new Date()
            }).on('changeDate', function (ev) {
                var starttime = $("#start_time_select").val();
                $("#end_time_select").datetimepicker('setStartDate', starttime);
                change_data_type_of_date();
            });
            $("#end_time_select").datetimepicker({
                bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
                startView: 2,
                minView: "month",
                format: "yyyy-mm-dd",
                todayBtn: "linked",
                todayHighlight: true,
                language: "zh-CN",
                autoclose: true,
                showMeridian: true,
                endDate: new Date()
            }).on('changeDate', function (ev) {
                var endtime = $("#end_time_select").val();
                $("#start_time_select").datetimepicker('setEndDate', endtime);
                change_data_type_of_date();
            });
        });

        /**
         * 根据自定义的天数决定是否显示小时
         */
        function change_data_type_of_date() {
            var starttime = $("#start_time_select").val();
            var endtime = $("#end_time_select").val();
            $("#data_freque").empty();
            var str = "";
            var cha = GetDateDiff(starttime, endtime);
            console.log(cha);
            if (cha > 8) {
                str = '<button type="button" class="btn btn-choose-red active">日</button>';
            } else {
                str = '<button type="button" class="btn btn-choose-red active">日</button><button type="button" class="btn btn-choose-red">小时</button>';
            }
            $("#data_freque").prepend(str);
            change_data_type($(this));
            $('#data_freque button').click(function (e) {
                change_data_type($(this));
            });
        }

        /**
         * 计算两个日期之间的相距天数
         */
        function GetDateDiff(starttime, endtime) {
            var startTime = new Date(Date.parse(starttime.replace(/-/g, "/"))).getTime();
            var endTime = new Date(Date.parse(endtime.replace(/-/g, "/"))).getTime();
            var dates = Math.abs((startTime - endTime)) / (1000 * 60 * 60 * 24);
            return dates;
        }
    </script>
    <!--页面上的一些js-->
    <script>
        /**
         * 历史查询中的button
         */
        var str_1 =
            '<button type="button" class="btn btn-choose-red active">replace_this</button>';
        var str_other =
            '<button type="button" class="btn btn-choose-red">replace_this</button>';

        /**
         * 点击切换tab页面
         * @param e
         */
        function changeTab(e) {
            // 1. 切换活跃状态
            $(e).parent().siblings().removeClass("active");
            $(e).parent().addClass("active");
            // 2. 根据id显示页面
            var id = $(e).attr("id").replace("title", "step");
            $("#" + id).siblings().hide();
            $("#" + id).show();
        }

        /**
         * 实时数据 中的 温度/电压排名 中的 表格的table字段格式
         */
        var voltage_data_format = [
            {
                field: 'top_voltage',
                title: '电压(V)'
            },
            {
                field: 'top_voltage_name',
                title: '单体'
            },
            {
                field: 'bottom_voltage',
                title: '电压(V)'
            },
            {
                field: 'bottom_voltage_name',
                title: '单体'
            }
        ];
        var temperature_data_format = [
            {
                field: 'top_temperature',
                title: '电压(V)'
            },
            {
                field: 'top_temperature_name',
                title: '单体'
            },
            {
                field: 'bottom_temperature',
                title: '电压(V)'
            },
            {
                field: 'bottom_temperature_name',
                title: '单体'
            }
        ];
        /**
         * 初始化table
         */
        window.onload = function () {
            var id = $("#id").val();
            $("#voltage").bootstrapTable({
                queryParamsType: "undefined",
                columns: voltage_data_format,
                url: "/monitor/get_voltage_data?id=" + id
            });
            $("#temperature").bootstrapTable({
                queryParamsType: "undefined",
                columns: temperature_data_format,
                url: "/monitor/get_temperature_data?id=" + id
            });
        };

        /**
         * 图表
         */
        $(function () {
            /**
             * 实时监控 - 电压/电流/SOC  今日曲线
             */
            echarts.init(document.getElementById('today_line')).setOption({
                title: {                // 标题
                    left: 'center',
                    text: '电压/SOC  今日曲线'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '3%',
                    bottom: '10%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: 'axis'     // 触发类型 axis坐标轴触发
                },
                legend: {               // 图例
                    data: ['电压', 'SOC'],
                    x: 'center',        //中间
                    y: '10%'         //下方
                },
                toolbox: [
                    {              // 工具栏
                        show: true,
                        feature: {
                            dataView: {readOnly: false},        //数据视图
                            magicType: {type: ['line', 'bar']}, //变换类型
                            restore: {},                        //刷新
                            saveAsImage: {}                     //保存图片
                        }
                    },
                    {
                        show: true,
                        x: '3%',
                        feature: {
                            myTool1: {
                                show: true,
                                title: '电压/电流',
                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                onclick: function () {
                                    //TODO 这边是切换电压电流的按钮
                                }
                            }
                        }
                    }
                ],
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: false,  //坐标轴两边留白，如果是false就是0点在y轴上
                    data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
                },
                yAxis: [
                    {
                        name: '电压(V)',
                        type: 'value',
                        boundaryGap: true,
                        // min: 0,
                        max: function (value) {
                            return value.max + 100;
                        }
                    },
                    {
                        name: 'SOC',
                        type: 'value',
                        yAxisIndex: 1,   //使用第二个y轴
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '电压',
                        type: 'line',
                        data: [200, 220, 223.5, 300, 395.6, 654.2, 824.3, 725.4, 542.8]
                    },
                    {
                        name: 'SOC',
                        type: 'line',
                        yAxisIndex: 1,  //使用第二个Y轴
                        data: [10, 20, 30.5, 40.8, 58.6, 44.2, 34.3, 25.4, 12.8]
                    }
                ]
            });
            /**
             * 实时监控 - 电压/温度 今日极值/极差曲线
             */
            echarts.init(document.getElementById('today_bar')).setOption({
                title: {                // 标题
                    left: 'center',
                    text: '电压/温度 今日极值/极差曲线'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '3%',
                    bottom: '10%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: 'axis',    // 触发类型 axis坐标轴触发
                    formatter: function (params) {
                        var length = params.length;
                        var str = params[0].name + "<br>";
                        str += params[0].seriesName + ":&nbsp;" + params[0].value + "<br>";
                        str += "单体电压最高(V):&nbsp;" + (params[0].value + params[1].value) + "<br>";
                        str += params[1].seriesName + ":&nbsp;" + params[1].value + "<br>";
                        str += params[2].seriesName + ":&nbsp;" + params[2].value + "<br>";
                        str += "单体温度最高(℃):&nbsp;" + (params[2].value + params[3].value) + "<br>";
                        str += params[3].seriesName + ":&nbsp;" + params[3].value + "<br>";
                        return str;
                    }
                },
                legend: {               // 图例
                    data: ['单体电压极差(V)', '单体温度极差(℃)'],
                    x: 'center',        //中间
                    y: '10%',           //下方
                    selectedMode: false  //取消图例上的点击事件
                },
                toolbox: [
                    {              // 工具栏
                        show: true,
                        top: '3%',
                        feature: {
                            dataView: {readOnly: false},        //数据视图
                            magicType: {type: ['line', 'bar']}, //变换类型
                            restore: {},                        //刷新
                            saveAsImage: {}                     //保存图片
                        }
                    },
                    {
                        show: true,
                        x: '3%',
                        feature: {
                            myTool1: {
                                show: true,
                                title: '电压/电流',
                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                onclick: function () {
                                    //TODO 这边是切换电压电流的按钮
                                }
                            }
                        }
                    }
                ],
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: true,  //坐标轴两边留白
                    data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
                },
                yAxis: [
                    {
                        splitLine: {    //不显示坐标辅助线
                            show: false
                        },
                        name: '电压(V)',
                        type: 'value',
                        boundaryGap: true,
                        // min: 0,
                        max: function (value) {
                            return value.max + 20;
                        }
                    },
                    {
                        splitLine: {    //不显示坐标辅助线
                            show: false
                        },
                        name: '温度',
                        type: 'value',
                        yAxisIndex: 1,   //使用第二个y轴
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value} ℃'
                        }
                    }
                ],
                series: [
                    {
                        name: '单体电压最低(V)',
                        type: 'bar',
                        stack: '电压',
                        color: '#FFFFFF',
                        barMaxWidth: 30,//最大宽度
                        data: [220, 182, 191]
                    },
                    {
                        name: '单体电压极差(V)',
                        type: 'bar',
                        stack: '电压',
                        barMaxWidth: 30,//最大宽度
                        data: [150, 232, 201]
                    },
                    {
                        name: '单体温度最低(℃)',
                        type: 'bar',
                        stack: '温度',
                        color: '#FFFFFF',
                        barMaxWidth: 30,//最大宽度
                        data: [234, 290, 330]
                    }
                    ,
                    {
                        name: '单体温度极差(℃)',
                        type: 'bar',
                        stack: '温度',
                        barMaxWidth: 30,//最大宽度
                        data: [154, 190, 330]
                    }
                ]
            });
            /**
             * 历史数据中的图表
             */
            echarts.init(document.getElementById('search_history')).setOption({
                title: {                // 标题
                    left: 'center',
                    top: '3%',
                    text: '大拇指商业广场 <2017-11-14~2017-11-14> 充电量'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '3%',
                    bottom: '10%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: 'axis'     // 触发类型 axis坐标轴触发
                },
                legend: {               // 图例
                    data: ['A相电流', 'B相电流', 'C相电流'],
                    x: 'center',        //中间
                    y: 'bottom'         //下方
                },
                toolbox: {              // 工具栏
                    show: true,
                    top: '3%',
                    feature: {
                        dataView: {readOnly: false},        //数据视图
                        magicType: {type: ['line', 'bar']}, //变换类型
                        restore: {},                        //刷新
                        saveAsImage: {}                     //保存图片
                    }
                },
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: false,  //坐标轴两边留白，如果是false就是0点在y轴上
                    data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
                },
                yAxis: [
                    {
                        name: '单位(A)',
                        type: 'value',
                        boundaryGap: true,
                        // min: 0,
                        max: function (value) {
                            return value.max + 100;
                        }
                    }
                ],
                series: [
                    {
                        name: 'A相电流',
                        type: 'line',
                        data: [200, 220, 223.5, 300, 395.6, 654.2, 824.3, 725.4, 542.8]
                    },
                    {
                        name: 'B相电流',
                        type: 'line',
                        data: [212.3, 234, 263.5, 350.8, 365.6, 674.2, 854.3, 715.4, 562.8]
                    },
                    {
                        name: 'C相电流',
                        type: 'line',
                        data: [232.3, 222, 243.5, 330.8, 368.6, 634.2, 894.3, 765.4, 512.8]
                    }
                ]
            });
        });

        /**
         * 初始化页面
         */
        $(function () {
            /**
             * 除了第一个其他的页面都不显示
             */
            $("#default-step-0").show().siblings().hide();
            $("#time_select").hide();
            /**
             * 按钮点击事件
             */
            button_click();
            /**
             * 更改 实时监控 模组监控 div 宽度
             */
            change_model_monitor_div_width();
            /**
             * 实时监控 - 单体电池电压/温度监控 根据电压显示背景颜色
             */
            get_voltage_color();
            /**
             * 实时监控 - 单体电池电压/温度监控 根据温度显示背景颜色
             */
            get_temperature_color();
            /**
             * 隐藏所有提示
             */
            $(".prompt").hide();
        });

        /**
         * 更改 实时监控 模组监控 div 宽度
         */
        function change_model_monitor_div_width() {
            // 判断有几个div-like-form
            var num = $(".div-like-form").length;
            console.log(num);
            var father_width = $(".div-like-form").width();
            var first_width = $(".div-left").width();
            var size = $(".div-like-form .div-left").size()/num;
            var width = ((father_width - first_width) / (size - 1) - 1) ;
            $(".div-like-form .div-left").each(function (index) {
                if (!$(this).hasClass("first-child")) {
                    $(this).css("width", width);
                }
            });
        }

        /**
         * 实时监控 - 单体电池电压/温度监控 根据电压显示背景颜色
         */
        function get_voltage_color() {
            $(".get_voltage_color").each(function (index) {
                var text = $(this).text()
                if (text < 200) {
                    $(this).addClass("color-0");
                } else if (text < 300) {
                    $(this).addClass("color-1");
                } else if (text < 400) {
                    $(this).addClass("color-2");
                } else {
                    $(this).addClass("color-3");
                }
            })
        }
        /**
         * 实时监控 - 单体电池电压/温度监控 根据温度显示背景颜色
         */
        function get_temperature_color() {
            $(".get_temperature_color").each(function (index) {
                var text = $(this).text()
                if (text < 20) {
                    $(this).addClass("color-4");
                } else if (text < 30) {
                    $(this).addClass("color-5");
                } else if (text < 40) {
                    $(this).addClass("color-6");
                } else {
                    $(this).addClass("color-7");
                }
            })
        }


        /**
         * 按钮点击事件
         */
        function button_click() {
            /**
             * 测点类型
             */
            $('#test_type button').click(function (e) {
                change_test_name($(this))
            });
            /**
             * 测点名称
             */
            $('#test_name button').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
            });
            /**
             * 时间范围
             */
            $('#time_ranges button').click(function (e) {
                change_data_freque($(this));
            });
            /**
             * 显示密度
             */
            $('#data_freque button').click(function (e) {
                change_data_type($(this));
            });
            /**
             * 显示类别
             */
            $('#data_type button').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
            });
        }

        /**
         * 当测点类型改变时，改变对应的测点名称
         */
        function change_test_name(button) {
            $(button).addClass('active').siblings().removeClass('active');
            var text = $(button).text();
            $("#test_name").empty();
            var str = "";
            switch (text) {
                case "能量":
                    str = str_1.replace("replace_this", "可储存电量") + str_other.replace("replace_this", "总电量") + str_other.replace("replace_this", "各次放出的能量");
                    break;
                case "电压":
                    str = str_1.replace("replace_this", "总电压") + str_other.replace("replace_this", "单体电压极值和极差(单选)");
                    break;
                case "电流":
                    str = str_1.replace("replace_this", "电流");
                    break;
                case "温度":
                    str = str_1.replace("replace_this", "温度") + str_other.replace("replace_this", "单体温度极值和极差(多选)");
                    break;
                case "SOC":
                    str = str_1.replace("replace_this", "SOC");
                    break;
                case "循环次数":
                    str = str_1.replace("replace_this", "循环次数");
                    break;
            }
            $("#test_name").prepend(str);
            $('#test_name button').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
            });
        }

        /**
         * 当时间范围变化时，变化显示密度
         */
        function change_data_freque(button) {
            $(button).addClass('active').siblings().removeClass('active');
            var text = $(button).text();
            $("#data_freque").empty();
            var str = "";
            switch (text) {
                case "日":
                    str = str_1.replace("replace_this", "小时") + str_other.replace("replace_this", "15分钟");
                    $("#time_select").hide();
                    break;
                case "周":
                    str = str_1.replace("replace_this", "日") + str_other.replace("replace_this", "小时");
                    $("#time_select").hide();
                    break;
                case "月":
                    str = str_1.replace("replace_this", "日");
                    $("#time_select").hide();
                    break;
                case "年":
                    str = str_1.replace("replace_this", "月");
                    $("#time_select").hide();
                    break;
                case "自定义":
                    str = str_1.replace("replace_this", "日") + str_other.replace("replace_this", "小时");
                    $("#time_select").show();
                    break;
            }
            $("#data_freque").prepend(str);
            change_data_type($(this));
            $('#data_freque button').click(function (e) {
                change_data_type($(this));
            });
        }

        /**
         * 当显示密度变化时，变化显示类别
         */
        function change_data_type(button) {
            $(button).addClass('active').siblings().removeClass('active');
            var text = $(button).text();
            if (text == '15分钟') {
                $("#data_type").empty();
                $("#data_type").prepend(str_1.replace("replace_this", "瞬态值"));
            } else {
                if ($("#data_type").children().size() != 3) {
                    var str = str_1.replace("replace_this", "平均值") + str_other.replace("replace_this", "最大值") + str_other.replace("replace_this", "最小值");
                    $("#data_type").empty();
                    $("#data_type").prepend(str);
                }
            }
            /**
             * 显示类别
             */
            $('#data_type button').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
            });
        }

    </script>
</head>
<body>
<div layout:fragment="content">
    <div class="main-content-inner">
        <input type="hidden" id="id" th:value="${id}">
        <!--面包屑导航栏-->
        <ul class="breadcrumb">
            <li>
                <a href="#">系统监控</a>
            </li>
            <li class="active" th:text="${grandparentName}"></li>
            <li class="active" th:text="${parentName}"></li>
            <li class="active" th:text="${name}"></li>
        </ul>
        <!-- 标题tab -->
        <ul class="nav nav-tabs">

            <li role="presentation" class="active"><a href="#" onclick="changeTab(this)" id="default-title-0">实时数据</a>
            </li>
            <li role="presentation"><a href="#" onclick="changeTab(this)" id="default-title-1">历史数据</a></li>
        </ul>
        <!-- 内容显示 -->
        <div>
            <!--实时监控-->
            <form id="default-step-0" class="container-fluid">
                <!--模组监控-->
                <fieldset class="col-sm-5" id="package_monitor" style="margin-right: 10px; height: 240px">
                    <legend>模组监控</legend>
                    <!--总电压-->
                    <label class="col-sm-4">总电压</label>
                    <span class="col-sm-2">2222<span>&nbsp;V</span></span>
                    <!--电流-->
                    <label class="col-sm-4">电流</label>
                    <span class="col-sm-2">2222<span>&nbsp;A</span></span>
                    <!--最高单体电压-->
                    <label class="col-sm-4">最高单体电压</label>
                    <span class="col-sm-2">2222<span>&nbsp;V</span></span>
                    <!--最高单体温度-->
                    <label class="col-sm-4">最高单体温度</label>
                    <span class="col-sm-2">2222<span>&nbsp;℃</span></span>
                    <!--最低单体电压-->
                    <label class="col-sm-4">最低单体电压</label>
                    <span class="col-sm-2">2222<span>&nbsp;V</span></span>
                    <!--最低单体温度-->
                    <label class="col-sm-4">最低单体温度</label>
                    <span class="col-sm-2">2222<span>&nbsp;℃</span></span>
                    <!--电压极差-->
                    <label class="col-sm-4">电压极差</label>
                    <span class="col-sm-2">2222<span>&nbsp;V</span></span>
                    <!--温度极差-->
                    <label class="col-sm-4">温度极差</label>
                    <span class="col-sm-2">2222<span>&nbsp;℃</span></span>
                    <div class="col-sm-6"></div>
                    <!--平均温度-->
                    <label class="col-sm-4">平均温度</label>
                    <span class="col-sm-2">2222<span>&nbsp;℃</span></span>
                </fieldset>
                <!--单体电压/温度-->
                <fieldset>
                    <legend>单体电压/温度</legend>
                    <div class="col-sm-6">
                        <label style="text-align: center; width: 100%">电压TOP 5/BOTTOM 5</label>
                        <table id="voltage" class="table table-condensed"></table>
                    </div>
                    <div class="col-sm-6">
                        <label style="text-align: center; width: 100%">温度TOP 5/BOTTOM 5</label>
                        <table id="temperature" class="table table-condensed"></table>
                    </div>
                </fieldset>
                <!--电压/电流/SOC  今日曲线-->
                <div id="today_line" style="width: 100%;height:300px;margin-top: 10px"></div>
                <!--电压/温度 今日极值/极差曲线-->
                <div id="today_bar" style="width: 100%;height:300px;margin-top: 10px"></div>
                <!--单体电池 电压/温度 监控-->
                <fieldset>
                    <legend>单体电池 电压/温度 监控</legend>
                    <div class="col-sm-12 div-like-form">
                        <div class="div-left first-child">
                            <div>名称</div>
                            <div>电压(V)</div>
                            <div>温度(℃)</div>
                        </div>
                        <!--TODO 下面用foreach来做 但是要注意的是width是要改变的 才能均匀-->
                        <div class="div-left ">
                            <div>1#模组</div>
                            <div class="get_voltage_color">111</div>
                            <div class="get_temperature_color">11</div>
                        </div>
                        <div class="div-left">
                            <div>2#模组</div>
                            <div class="get_voltage_color">222</div>
                            <div class="get_temperature_color">22</div>
                        </div>
                        <div class="div-left">
                            <div>3#模组</div>
                            <div class="get_voltage_color">333</div>
                            <div class="get_temperature_color">33</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                    </div>
                    <div class="col-sm-12 div-like-form">
                        <div class="div-left first-child">
                            <div>名称</div>
                            <div>电压(V)</div>
                            <div>温度(℃)</div>
                        </div>
                        <!--TODO 下面用foreach来做 但是要注意的是width是要改变的 才能均匀-->
                        <div class="div-left">
                            <div>1#模组</div>
                            <div class="get_voltage_color">111</div>
                            <div class="get_temperature_color">11</div>
                        </div>
                        <div class="div-left">
                            <div>2#模组</div>
                            <div class="get_voltage_color">222</div>
                            <div class="get_temperature_color">22</div>
                        </div>
                        <div class="div-left">
                            <div>3#模组</div>
                            <div class="get_voltage_color">333</div>
                            <div class="get_temperature_color">33</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                        <div class="div-left">
                            <div>4#模组</div>
                            <div class="get_voltage_color">444</div>
                            <div class="get_temperature_color">44</div>
                        </div>
                    </div>
                    <!--色卡-->
                    <div class="col-sm-12" style="text-align: center; padding-top: 10px">
                        <div class="col-sm-2">
                            电压下限&nbsp;<span></span>&nbsp;mv
                        </div>
                        <!--色卡-->
                        <div class="col-sm-2" style="padding: 0 35px;">
                            <div class="color color-0"></div>
                            <div class="color color-1"></div>
                            <div class="color color-2"></div>
                            <div class="color color-3"></div>
                        </div>
                        <div class="col-sm-2">
                            电压上限&nbsp;<span></span>&nbsp;mv
                        </div>
                        <div class="col-sm-2">
                            温度下限&nbsp;<span></span>&nbsp;mv
                        </div>
                        <!--色卡-->
                        <div class="col-sm-2" style="padding: 0 35px;">
                            <div class="color color-4"></div>
                            <div class="color color-5"></div>
                            <div class="color color-6"></div>
                            <div class="color color-7"></div>
                        </div>
                        <div class="col-sm-2">
                            温度上限&nbsp;<span></span>&nbsp;mv
                        </div>
                    </div>
                </fieldset>
            </form>
            <!--历史查询-->
            <div id="default-step-1">
                <form style="margin-top: 10px" class="col-sm-12">
                    <div>
                        <label style="margin-right: 15px">测点类别</label>
                        <div id="test_type" class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active">电压</button>
                            <button type="button" class="btn btn-choose-red">电流</button>
                            <button type="button" class="btn btn-choose-red">温度</button>
                        </div>
                    </div>
                    <div>
                        <label style="margin-right: 15px">测点名称</label>
                        <div id="test_name" class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active">总电压</button>
                            <button type="button" class="btn btn-choose-red">单体电压极值和极差(单选)</button>
                        </div>
                    </div>
                    <div>
                        <label style="margin-right: 15px">时间范围</label>
                        <div id="time_ranges" class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active">日</button>
                            <button type="button" class="btn btn-choose-red">周</button>
                            <button type="button" class="btn btn-choose-red">月</button>
                            <button type="button" class="btn btn-choose-red">年</button>
                            <button type="button" class="btn btn-choose-red">自定义</button>
                            <div style="display: inline-block" id="time_select">
                                <input class="form_date"
                                       style="height: 30px; background-color: white !important; border-radius: 5px !important"
                                       type="text" placeholder="开始时间"
                                       id="start_time_select" data-link-field="start_time" data-link-format="yyyy-mm-dd"
                                       readonly>
                                <span>至</span>
                                <input class="form_date"
                                       style="height: 30px; background-color: white !important; border-radius: 5px !important"
                                       type="text" placeholder="结束时间"
                                       id="end_time_select" data-link-field="end_time" data-link-format="yyyy-mm-dd"
                                       readonly>
                                <input type="hidden" id="start_time" name="start_time">
                                <input type="hidden" id="end_time" name="end_time">
                            </div>
                        </div>
                    </div>
                    <div>
                        <label style="margin-right: 15px">显示密度</label>
                        <div id="data_freque" class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active">小时</button>
                            <button type="button" class="btn btn-choose-red">15分钟</button>
                        </div>
                    </div>
                    <div>
                        <label style="margin-right: 15px">显示类别</label>
                        <div id="data_type" class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active">平均值</button>
                            <button type="button" class="btn btn-choose-red">最小值</button>
                            <button type="button" class="btn btn-choose-red">最大值</button>
                        </div>
                    </div>
                </form>
                <div id="search_history" class="col-sm-12"
                     style="height: 400px; margin-top: 10px; border-top: 1px solid #C5D0DC;"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>